import React, { useMemo, useState } from 'react'
import styles from '../css/Myhome.module.css'
import { LoopOutline } from 'antd-mobile-icons'
import { Space, Switch } from 'antd-mobile'
import { Button } from 'antd-mobile'
import { useSelector } from 'react-redux'
import { outdataHuan, outdataKai,ondatashi } from '../../../qie/slice/ticket'
import { useDispatch } from 'react-redux'
import { Popup } from 'antd-mobile'
import { CalendarPickerView } from 'antd-mobile'
import dayjs from 'dayjs'
import { dataFrom } from '../../../unti'
import {useNavigate} from 'react-router-dom'
function Myhome() {
    const diapth = useDispatch()
    const nav=useNavigate()
    const start = useSelector((store) => store.ticket.start)
    const end = useSelector((store) => store.ticket.end)
    const date = useSelector((store) => store.ticket.date)
    const isSpeed = useSelector((store) => store.ticket.isSpeed)
    const [visible5, setVisible5] = useState(false)
    const dtobj=useMemo(()=>dataFrom(date),[date])
    const renderBottom = (dt) => {
        // const c=Math.ceil(dayjs(dt).diff(dayjs(),'day',true))
        const c = Math.ceil(dayjs(dt).diff(dayjs(), 'day', true))

        if (c == 0) {
            return '今天'
        }
        else if (c == 1) {
            return '明天'
        }
        else if (c == 2) {
            return '后天'
        }
        return ''
    }

    return (
        <div>

            <div className={[styles.row, styles.row1].join(' ')}>
                <div onClick={()=>nav('/city/start')}>{start}</div>
                <LoopOutline fontSize={26} onClick={() => diapth(outdataHuan())} />
                <div onClick={()=>nav('/city/end')}>{end}</div>
            </div>

            <div className={styles.row} onClick={() => setVisible5(true)}>
                <span>{dtobj.date}</span>
                <span >
                    <span style={{ color: 'gray' }}>{dtobj.day}</span>
                    <span style={{ color: 'gray' }}>{dtobj.info}</span>
                </span>
            </div>

            <div className={[styles.row, styles.row1].join(' ')}>
                <div>只看高铁动车</div>
                <div><Switch checked={isSpeed}
                    onChange={(val) => diapth(outdataKai(val))}

                /></div>
            </div>

            <Button block color='warning' size='large' onClick={()=>nav(`/chepiao?start=${start}&end=${end}&date=${date}&isSpeed=${isSpeed}`)}>
                搜索
            </Button>



            <Popup
                visible={visible5}
                onMaskClick={() => {
                    setVisible5(false)
                }}
                bodyStyle={{
                    borderTopLeftRadius: '8px',
                    borderTopRightRadius: '8px',
                    minHeight: '40vh',
                }}
            >

                <CalendarPickerView
                    min={Date.now()}
                    max={Date.now() + 15 * 24 * 60 * 60 * 1000}
                    renderTop={false}
                    renderBottom={renderBottom}
                    onChange={(val)=>{
                        if(val){
                            diapth(ondatashi(val.toString()))
                            setVisible5(false)
                        }
                    }}
                    
                />
            </Popup>
        </div>
    )
}

export default Myhome
